<script setup lang="ts">
import { navigateTo } from '@tarojs/taro';
import IMG_ICON_DEVICE_ACCOUNT from '/@/assets/image/icon/device-account.png';
import IMG_ICON_KNOWLEDGE from '/@/assets/image/icon/knowledge.png';
import IMG_ICON_VIDEO_MONITOR from '/@/assets/image/icon/video-monitor.png';
import IMG_ICON_CHANGE_SHIFTS from '/@/assets/image/icon/change-shifts.png';
import IMG_ICON_BEDDING_AND_CLOTHING from '/@/assets/image/icon/bedding-and-clothing.png';
import IMG_ICON_CENTRAL_LOGISTICS from '/@/assets/image/icon/central-logistics.png';
import IMG_ICON_ASSET_CHANGE from '/@/assets/image/icon/asset-change.png';
</script>

<template>
  <view class="all-utils app-page--1">
    <app-navbar title="全部应用" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="all-utils__wrapper">
        <view class="all-utils__title">我的工具</view>

        <nut-grid class="home-logistics-utils__wrapper" column-num="4" :border="false">
          <nut-grid-item text="交换班" @click="navigateTo({ url: '/pages/swap/start/index' })">
            <nut-badge color="#ff3e3e">
              <nut-avatar shape="square" bg-color="transparent">
                <image :src="IMG_ICON_CHANGE_SHIFTS" />
              </nut-avatar>
            </nut-badge>
          </nut-grid-item>
          <nut-grid-item text="中央运送">
            <nut-badge color="#ff3e3e">
              <nut-avatar shape="square" bg-color="transparent">
                <image :src="IMG_ICON_CENTRAL_LOGISTICS" />
              </nut-avatar>
            </nut-badge>
          </nut-grid-item>
          <nut-grid-item text="被服管理">
            <nut-badge color="#ff3e3e">
              <nut-avatar shape="square" bg-color="transparent">
                <image :src="IMG_ICON_BEDDING_AND_CLOTHING" />
              </nut-avatar>
            </nut-badge>
          </nut-grid-item>
          <nut-grid-item
            text="设备台账"
            @click="navigateTo({ url: '/pages/device-account/list/index' })"
          >
            <nut-badge color="#ff3e3e">
              <nut-avatar shape="square" bg-color="transparent">
                <image :src="IMG_ICON_DEVICE_ACCOUNT" />
              </nut-avatar>
            </nut-badge>
          </nut-grid-item>
          <nut-grid-item text="知识库" @click="navigateTo({ url: '/pages/knowledge/type/index' })">
            <nut-badge color="#ff3e3e">
              <nut-avatar shape="square" bg-color="transparent">
                <image :src="IMG_ICON_KNOWLEDGE" />
              </nut-avatar>
            </nut-badge>
          </nut-grid-item>
          <nut-grid-item
            text="视频监控"
            @click="navigateTo({ url: '/pages/video-monitor/list/index' })"
          >
            <nut-badge color="#ff3e3e">
              <nut-avatar shape="square" bg-color="transparent">
                <image :src="IMG_ICON_VIDEO_MONITOR" />
              </nut-avatar>
            </nut-badge>
          </nut-grid-item>
          <nut-grid-item
            text="设备变动"
            @click="navigateTo({ url: '/pages/asset-change/index/index' })"
          >
            <nut-badge color="#ff3e3e">
              <nut-avatar shape="square" bg-color="transparent">
                <image :src="IMG_ICON_ASSET_CHANGE" />
              </nut-avatar>
            </nut-badge>
          </nut-grid-item>
        </nut-grid>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.all-utils {
  background-color: #fff;

  &__title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  &__wrapper {
    padding: 20px;
  }
}
</style>
